﻿<div class="ui-widget-content">
    <h3>API básica dos componentes</h3>
    <p>
        Até o momento, todos os componentes tiveram suas propriedades configuradas apenas uma vez.
        No entanto é possível redefiní-las a qualquer hora, bem como ler seus valores.
        Por meio dos getters e setters do jQuery UI. Estes são invocados por meio do parâmetro "option". Por exemplo:
    </p>

    <div class="ui-widget-content" id="draggable_option">
        <div><code id="bt_20x20">$("#meu_draggable").draggable("option", "grid", [20, 20]);</code></div>
        <div><code id="bt_50x50">$("#meu_draggable").draggable("option", {grid: [50, 50], delay: 1000});</code></div>
        <div><code id="bt_sem_grid">$("#meu_draggable").draggable("option", {grid: false, delay: 0});</code></div>
        <div><code id="bt_qual_grid">$("#meu_draggable").draggable("option", "grid");</code></div>
        <div><code id="bt_qual_container">$("#meu_draggable").draggable("option", "delay");</code></div>
    </div>

    <p>
        Todos os componentes do jQuery UI têm os métodos "disable" e "enable" para desativar ou reativar a função do componente.
        Isto é equivalente a definir o valor da proriedade "disabled", que todos os componentes do jQuery UI têm.
        Objetos desativados ficam "fantasmas". A classe CSS "ui-state-disabled" é adicionada aos elementos desabilitados.
    </p>

    <div class="ui-widget-content" id="draggable_enable">
        <div id="bt_enable">
            <div><code class="bt_enable">$("#meu_draggable").draggable("enable");</code></div>
            <div><code class="bt_enable">$("#meu_draggable").draggable("option", {disabled: false});</code></div>
        </div>
        <div id="bt_disable">
            <div><code class="bt_disable">$("#outro_draggable").draggable("disable");</code></div>
            <div><code class="bt_disable">$("#outro_draggable").draggable("option", {disabled: true});</code></div>
        </div>
    </div>

    <p>
        O método "destroy" remove completamente a funcionalidade do componente. Todo componente tem um evento
        "create" que é chamado quando o objeto ganha a funcionalidade. Por exemplo:
    </p>

    <div id="tabs_destroy">
        <ul>
            <li><a href="#aba1">Destruir</a></li>
            <li><a href="#aba2">Construir</a></li>
            <li><a href="#aba3">Construir com evento</a></li>
        </ul>
        <div id="aba1">
            <div><code class="bt_destroy">$("#abas").tabs("destroy");</code></div>
        </div>
        <div id="aba2">
            <div><code class="bt_reconstroi">$("#abas").tabs();</code></div>
        </div>
        <div id="aba3">
            <pre class="bt_create">$("#abas").tabs({
    create: function(event, ui) { alert("Tabs criado."); }
});</pre>
        </div>
    </div>

    <script type="text/javascript">
        inicializador.apiEfeitos = function() {
            $("#draggable_option, #draggable_enable").draggable().css({width: 600, height: 70, padding: 5});
            $("#tabs_destroy").tabs();

            $("#bt_20x20").click(function() {
                $("#draggable_option").draggable("option", "grid", [20, 20]);
            }).css({color: "magenta", cursor: "pointer", "border-style": "solid", "border-color": "gray", "border-width": 1});

            $("#bt_50x50").click(function() {
                $("#draggable_option").draggable("option", {grid: [50, 50], delay: 1000});
            }).css({color: "blue", cursor: "pointer", "border-style": "solid", "border-color": "gray", "border-width": 1});

            $("#bt_sem_grid").click(function() {
                $("#draggable_option").draggable("option", {grid: false, delay: 0});
            }).css({color: "red", cursor: "pointer", "border-style": "solid", "border-color": "gray", "border-width": 1});

            $("#bt_qual_grid").click(function() {
                alert($("#draggable_option").draggable("option", "grid"));
            }).css({color: "green", cursor: "pointer", "border-style": "solid", "border-color": "gray", "border-width": 1});

            $("#bt_qual_container").click(function() {
                alert($("#draggable_option").draggable("option", "delay"));
            }).css({color: "brown", cursor: "pointer", "border-style": "solid", "border-color": "gray", "border-width": 1});

            $(".bt_enable").click(function() {
                $("#draggable_enable").draggable("enable");
            }).css({color: "teal", cursor: "pointer", "border-style": "solid", "border-color": "gray", "border-width": 1});

            $(".bt_disable").click(function() {
                $("#draggable_enable").draggable("disable");
            }).css({color: "orange", cursor: "pointer", "border-style": "solid", "border-color": "gray", "border-width": 1});

            $(".bt_destroy").click(function() {
                $("#tabs_destroy").tabs("destroy");
            }).css({cursor: "pointer", "border-style": "solid", "border-color": "gray", "border-width": 1});

            $(".bt_reconstroi").click(function() {
                $("#tabs_destroy").tabs();
            }).css({cursor: "pointer", "border-style": "solid", "border-color": "gray", "border-width": 1});

            $(".bt_create").click(function() {
                $("#tabs_destroy").tabs({
                    create: function(event, ui) { alert("Tabs criado."); }
                });
            }).css({cursor: "pointer", "border-style": "solid", "border-color": "gray", "border-width": 1, margin: 0});
        };
    </script>
</div>